(function () {
    let index,sum;//遮罩层用
    let ids;//节流？优化效果，让短时间内连续多次点击left和right不触发
    let couponid=location.search.slice(1).split("=")[1]//利用location.search解析url？后面的数据
    init()
    function init(){
        getData()
        $("#marsk .delete").click(deleteMarst)//点×退出遮罩层；
        $("#main .goodsList").on("click","li",clickHandler)//li设置点击事件
        $("#marsk .content>span").click(carousel)//左右按钮设置点击事件
        $("footer>.nav li").eq(2).click(clickTop)//返回顶部
    }
    function getData(){
        $.ajax({
            url:'http://chst.vip:1234/api/getcouponproduct',
            data:{
                couponid:couponid
            }
        }).then(res=>{
            createGoodsList(res.result)//创建商品列表
            sum=res.result.length;
        })
    }
    function createGoodsList(data){//创建商品列表
        let html=data.reduce((value,item)=>{
            return value+=`
                <li couponProductId=${item.couponProductId}>
                    <div class='left'>
                        ${item.couponProductImg}
                    </div>
                    <div class='right'>
                        <h4 class='title'>${item.couponProductName}</h4>
                        <p class='price'>${item.couponProductPrice}</p>
                        <p class='time'>${item.couponProductTime}</p>
                    </div>
                </li>
            `
        },'')
        let img=data.reduce((value,item)=>{
            return value+=`${item.couponProductImg}`
        },'')
        $("#main .goodsList").html(html)
        //根据数据创建轮播图图片，并且设置imgCon的宽度
        $("#marsk .imgCon").css({width:`${data.length}`*5.33+'rem'}).html(img)
    }
    function clickHandler(){//点击出现遮罩层
        if($(this)[0].nodeName==="LI") {
            index=`${$(this).attr("couponProductId")}`//couponProductId动态创建时根据数据添加的属性,属性值代表第几个图片
            $("#marsk").css({top:0}).find(".imgCon").css({left:-index*5.33+"rem"});//点击Li直接跳转，无需动漫效果
        }
    }
    function deleteMarst(){//点×退出遮罩层；
        $("#marsk").css({top: "-100%"})
    }
    function carousel(){//轮播
        if(ids) return;//ids定义没有初始值是undefined = false; 所以第一次不触发return
        ids=setTimeout(function(){//给ids赋值 此时ids是true;
            clearTimeout(ids)
            ids=undefined;
        },500)//500毫秒内ids是true无法进入事件，500毫秒后将定时去除，给ids赋值undefined也就是false就可以触发事件
        if($(this).attr("class")==="left"){
            index--;
            if(index<0){
                alert("已经是第一页了")
                index=0;
                return;
            }
            $("#marsk").find(".imgCon").animate({left:-index*5.33+"rem"},500);//轮播动画效果
        }else if($(this).attr("class")==="right"){
            index++;
            if(index>sum-1){//sum是上文获取的数据长度，因为第一个图片不需要移动，最后一张图要往前移动总数-1
                alert("已经是最后一页了")
                index=sum-1;
                return;
            }
            $("#marsk").find(".imgCon").animate({left:-index*5.33+"rem"},500);//轮播动画效果
        }
    }
    function clickTop() {
        $("html").stop().animate({
            scrollTop: 0
        }, 200)
    }          
} ())